<template>
  <!--公用弹框-->
  <div>
    <div id="alertModel" class="alertModel" v-show="show">
      <div class="alertBox fadeInDown">
        <h2 class="textTitle">
          <my-title :title='"新增资质/品牌"'></my-title>
          <i class="iconfont iconCancel cursor" @click="close()">&#xe73e;</i>
        </h2>
        <form action="" class="addContent">
          <div>
          <div class="inputWrap">
            <label class="subTitle" for="">
              <i class="must">*</i>
              资质类型
            </label>
            <el-select v-model="value1" placeholder="请选择">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="inputWrap">
            <label class="subTitle" for="">
              <i class="must">*</i>
              资质名称
            </label>
            <el-select v-model="value2" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="inputWrap">
            <label class="f1 subTitle" for="">
              <i class="noMust">*</i>           
              资质说明
            </label>
            <div class="f1 wrapper">
              <textarea name="" id="" cols="30" rows="10" class="f1 txtNormal"></textarea>
            </div>
          </div>
          <div class="inputWrap">
            <label class="f1 subTitle" for="">           
              上传证件
            </label>
            <div class="f1 wrapper">
              <textarea name="" id="" cols="30" rows="10" class="f1 txtNormal"></textarea>
            </div>
          </div>
          <!-- <div class="textCenter">
            <button type="button" class="btn btnCancel cursor" ref='no' @click="close('no')" >
              取消
            </button>
            <button type="button" class="btn cursor" v-focus ref='yes' @click="close('yes')">
              确定
            </button>
          </div> -->
          
          <div class="button">
            <span class="btn cursor" ref="no" @click="close('no')">关闭</span>
            <button class="submit" type="submit" >确认</button>
          </div>
        </div>
        </form>
        
      </div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable no-undef */
  import myTitle from '@/base/title/title'
  // import Vue from 'vue'
  export default {
    name: 'addUpdate',
    data () {
      return {
        show: false,
        addupdate: [],
        text: '我是文字',
        resCode: '',
        btnCancel: false,
        options1: [
          {
            value: '选项1',
            label: '基本资质'
          },
          {
            value: '选项2',
            label: '特殊资质'
          }
        ],
        options2: [
          {
            value: '选项3',
            label: '营业执照'
          },
          {
            value: '选营业项4',
            label: 'icp备案'
          }
        ],
        value1: '选项1',
        value2: '选项3'
      }
    },
    mounted: function () {
      // Vue.prototype.alert = (setting) => {
      //   this.alerts.push({})
      //   // this.text = setting.text
      //   this.resCode = setting.resCode
      //   this.btnCancel = setting.btnCancel
      //   return new Promise((resolve, reject) => {
      //     this.$refs.yes.onclick = () => {
      //       resolve(this.text)
      //     }
      //     this.$refs.no.onclick = () => {
      //       // reject(this.text)
      //     }
      //   })
      // }
    },
    methods: {
      close: function (v) {
        this.show = false
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          // 聚焦元素
          el.focus()
        }
      }
    },
    components: {
      'my-title': myTitle
    }
  }
</script>
<!--Add "scoped" attribute to limit CSS to this component only-->
<style scoped lang="stylus">
  @import '~@/assets/css/variable'
  .alertModel
    width 100%
    height 100%
    position fixed
    left 0
    top 0
    background rgba(0, 0, 0, 0.4)
    z-index 999
    display block
    .alertBox
      min-width 600px
      box-sizing border-box
      background #fff
      position absolute
      left 50%
      top 20%
      padding 0px 25px 30px 25px
      border-radius 10px
      -webkit-transform translate(-50%, 0%)
      transform translate(-50%, 0%)
      box-shadow 0px 1px 1px 1px rgba(0, 0, 0, 0.2)
      .textTitle
        width 100%
        font-size 16px
        color $color-yellow
        padding 10px 0 15px 15px
        letter-spacing 1
        position relative
        display inline-block
        box-sizing border-box
        margin-top 15px
        .icon-cancel
          position absolute
          right -15px
          top 9px
          width 32px
          height 32px
          text-align center
          vertical-align middle
        .iconfont
          color #F9C91C
          font-family 'iconfont' !important
          font-size 16px
          font-style normal
          -webkit-font-smoothing antialiased
          -moz-osx-font-smoothing grayscale
        .iconCancel
          position absolute
          right -15px
          top 9px
          width 32px
          height 32px
          text-align center
          vertical-align middle
        .iconfont
          margin-right 5px
          display inline-block
          vertical-align middle
      .addContent
        padding 10px 30px
        .inputWrap
          margin 15px 0
          .subTitle
            width 100px
            float left 
            font-size 14px
            color #393d40
            display inline-block
            .must
              color red
            .noMust
              color #fff  
          .wrapper
            width 380px
            .txtNormal
              width 100%
              height 100px  
              border-color #d2d2d2
              outline none
        .inputWrap::after 
          display block
          content ""
          height 0
          clear both
          visibility hidden     
        .button
          margin-left 140px
          overflow hidden      
          .btn
            width 80px
            height 40px
            border-radius 5px
            line-height 40px
            border 1px solid #FFB135
            margin 0 20px
            background #fff
            color #FFB135
            float left
            text-align center
            font-size 14px
            .btn:focus
              outline 0
            .btnCancel
              background-color #fff
          .submit
            width 80px
            height 40px
            border-radius 5px
            line-height 40px
            border none
            margin 0 20px 
            background #FFB135  
            color #fff 
</style>
